<template>
  <div class="header">
      <div class="header-img"></div>
      <h1 class="header-h1">Despacito丶Music</h1>
      <i class="icon-mine"></i>
  </div>
</template>
<script>
export default {
  name:"haader"
}
</script>
<style lang="stylus" scoped>
  @import "~assets/stylus/variable.styl";
  @import "~assets/stylus/mixin.styl";
  .header
    position relative
    text-align center
    .header-img
      display inline-block
      width 0.6rem
      height 0.6rem
      bg-image('logo')
      vertical-align top
      margin-top .12rem
      background-size .6rem .6rem
    .header-h1
        font-size $font-sise-xxl
        display inline-block
        line-height 0.88rem
        color $color-text
    .icon-mine
      color $color-text
      position absolute
      font-size $font-sise-xxl
      top 0rem
      right .12rem
      display inline-block
      vertical-align top
      line-height 0.88rem
</style>

